<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise初体验</title>
  </head>

  <body>
    <div>Promise初体验</div>
    <button class="btn">抽奖</button>
  </body>
  <script>
    /* 
    封装一个取[min,max)之间的函数
     */
    function getRandomNum(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min
    }
    let btn = document.querySelectorAll('.btn');
    btn[0].addEventListener("click", function () {
      //第一种:普通写法
      // setTimeout(() => {
      //   let n = getRandomNum(0, 100)
      //   if (n < 30) {
      //     alert("恭喜你中奖了,中奖号码是" + n);
      //   } else {
      //     alert("对不起，再接再厉！号码" + n);
      //   }
      // }, 1000)

      // 第二种：Promise写法
      const p = new Promise((resolve, reject) => {
        //1.初始化状态为pending          ---初始化状态
        //2.执行异步任务：开启定时器，发送Ajax请求
        //补充：根据异步任务的执行结果去修改Promise对应的状态
        setTimeout(() => {
          let n = getRandomNum(0, 100)
          if (n < 30) {
            // 2.1 如果异步任务结果成功，修改Promise的状态为fulfilled
            //  需要传递的信息
            resolve(n);
          } else {
            // 2.2 如果异步任务结果失败，修改Promise的状态为rejected
            // reject(); //修改Promise的状态为rejected
            reject(n)
          }
        }, 1000)
      })

      p.then((n) => {
        //1.当promise对象的状态变为fulfilled,会自动调用then方法的第一个回调
        alert("恭喜你中奖了,中奖号码是" + n);
      }, (n) => {
        //2.当promise对象的状态变为fulfilled,会自动调用then方法的第二个回调
        alert("对不起，再接再厉！号码" + n);
      })
    })
  </script>

</html>